<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Vue基础 | 茂茂个人博客</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="https://pan.zealsay.com/blog/favicon.ico">
    <script>
          var _hmt = _hmt || [];
          (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?b0aae218897fa9d8a9f76e9a77e0b3c6";
            var s = document.getElementsByTagName("script")[0]; 
            s.parentNode.insertBefore(hm, s);
          })();
        </script>
    <meta name="description" content="开心最重要呀">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    
    <link rel="preload" href="/vue-press-blog-html/assets/css/0.styles.466ff2da.css" as="style"><link rel="preload" href="/vue-press-blog-html/assets/js/app.0c76d487.js" as="script"><link rel="preload" href="/vue-press-blog-html/assets/js/5.12b1c0e9.js" as="script"><link rel="preload" href="/vue-press-blog-html/assets/js/1.6e6d8766.js" as="script"><link rel="preload" href="/vue-press-blog-html/assets/js/17.481f1fe6.js" as="script"><link rel="prefetch" href="/vue-press-blog-html/assets/js/10.d1650d04.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/11.7dcf07b1.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/12.0f0733e4.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/13.c979057e.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/14.9fb7b8f2.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/15.8ea86eee.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/16.6a2fbcca.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/18.8bb85eca.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/19.2c2d2093.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/20.7785d7f0.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/21.da88625b.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/22.283c942f.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/23.f1a0dacf.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/24.1a2dd800.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/25.006a8aa9.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/26.a2a7c588.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/27.ad0f4c12.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/28.bd2020fd.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/29.8dfd8ec0.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/3.3a1f118a.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/30.ffdc92aa.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/31.1869d54d.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/32.1c9db73f.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/33.0d483b05.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/34.3210bba1.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/35.b62e6ca5.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/36.523400ab.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/37.939dfcd0.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/38.455599c3.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/4.70e76d9d.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/6.a759eba0.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/7.0caf748e.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/8.dc1bf2a5.js"><link rel="prefetch" href="/vue-press-blog-html/assets/js/9.5483e0b1.js">
    <link rel="stylesheet" href="/vue-press-blog-html/assets/css/0.styles.466ff2da.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container no-sidebar" data-v-0c5314fc><div data-v-0c5314fc><div id="loader-wrapper" class="loading-wrapper" data-v-d48f4d20 data-v-0c5314fc data-v-0c5314fc><div class="loader-main" data-v-d48f4d20><div data-v-d48f4d20></div><div data-v-d48f4d20></div><div data-v-d48f4d20></div><div data-v-d48f4d20></div></div> <!----> <!----></div> <div class="password-shadow password-wrapper-out" style="display:none;" data-v-5cb9a64e data-v-0c5314fc data-v-0c5314fc><h3 class="title" style="display:none;" data-v-5cb9a64e data-v-5cb9a64e>茂茂个人博客</h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-5cb9a64e data-v-5cb9a64e><input type="password" value="" data-v-5cb9a64e> <span data-v-5cb9a64e>Konck! Knock!</span> <button data-v-5cb9a64e>OK</button></label> <div class="footer" style="display:none;" data-v-5cb9a64e data-v-5cb9a64e><span data-v-5cb9a64e><i class="iconfont reco-theme" data-v-5cb9a64e></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-5cb9a64e>vuePress-theme-reco</a></span> <span data-v-5cb9a64e><i class="iconfont reco-copyright" data-v-5cb9a64e></i> <a data-v-5cb9a64e><span data-v-5cb9a64e>茂茂</span>
            
          <span data-v-5cb9a64e>2019 - </span>
          2022
        </a></span></div></div> <div class="hide" data-v-0c5314fc><div data-v-0c5314fc><div id="smart" class="wrapper-page" style="background-image:url(/vue-press-blog-html/articleImage/img16.jpeg);background-position-x:center;background-position-y:center;background-size:cover;background-repeat-x:no-repeat;background-repeat-y:no-repeat;" data-v-0c5314fc><header class="navbar" data-v-0c5314fc><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-press-blog-html/" class="home-link router-link-active"><img src="/vue-press-blog-html/logo.png" alt="茂茂个人博客" class="logo"> <span class="site-name">茂茂个人博客</span></a> <div class="links"><div id="dayNightSwitch" class="generalWrapper" data-v-32f44868><a class="click" data-v-32f44868><div class="onOff daySwitch" data-v-32f44868><div class="star star1" data-v-32f44868></div> <div class="star star2" data-v-32f44868></div> <div class="star star3" data-v-32f44868></div> <div class="star star4" data-v-32f44868></div> <div class="star star5" data-v-32f44868></div> <div class="star sky" data-v-32f44868></div> <div class="sunMoon" data-v-32f44868><div class="crater crater1" data-v-32f44868></div> <div class="crater crater2" data-v-32f44868></div> <div class="crater crater3" data-v-32f44868></div> <div class="cloud part1" data-v-32f44868></div> <div class="cloud part2" data-v-32f44868></div></div></div></a></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-press-blog-html/" class="nav-link"><i class="iconfont reco-home"></i>
  主页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      博客
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/vue-press-blog-html/categories/编辑/" class="nav-link"><i class="iconfont undefined"></i>
  编辑
</a></li><li class="dropdown-item"><!----> <a href="/vue-press-blog-html/categories/vue/" class="nav-link"><i class="iconfont undefined"></i>
  vue
</a></li><li class="dropdown-item"><!----> <a href="/vue-press-blog-html/categories/工具使用/" class="nav-link"><i class="iconfont undefined"></i>
  工具使用
</a></li><li class="dropdown-item"><!----> <a href="/vue-press-blog-html/categories/读书/" class="nav-link"><i class="iconfont undefined"></i>
  读书
</a></li><li class="dropdown-item"><!----> <a href="/vue-press-blog-html/categories/前端/" class="nav-link"><i class="iconfont undefined"></i>
  前端
</a></li><li class="dropdown-item"><!----> <a href="/vue-press-blog-html/categories/python/" class="nav-link"><i class="iconfont undefined"></i>
  python
</a></li><li class="dropdown-item"><!----> <a href="/vue-press-blog-html/categories/node/" class="nav-link"><i class="iconfont undefined"></i>
  node
</a></li><li class="dropdown-item"><!----> <a href="/vue-press-blog-html/categories/可视化/" class="nav-link"><i class="iconfont undefined"></i>
  可视化
</a></li><li class="dropdown-item"><!----> <a href="/vue-press-blog-html/categories/高德地图/" class="nav-link"><i class="iconfont undefined"></i>
  高德地图
</a></li><li class="dropdown-item"><!----> <a href="/vue-press-blog-html/categories/ios/" class="nav-link"><i class="iconfont undefined"></i>
  ios
</a></li><li class="dropdown-item"><!----> <a href="/vue-press-blog-html/categories/react/" class="nav-link"><i class="iconfont undefined"></i>
  react
</a></li></ul></div></div><div class="nav-item"><a href="/vue-press-blog-html/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><a href="/vue-press-blog-html/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间轴
</a></div><div class="nav-item"><a href="/vue-press-blog-html/about/" class="nav-link"><i class="iconfont reco-account"></i>
  关于
</a></div> <!----></nav></div></header> <div class="sidebar-mask" data-v-0c5314fc></div> <aside class="sidebar" data-v-0c5314fc><div class="personal-info-wrapper" data-v-03833281 data-v-0c5314fc><img src="/vue-press-blog-html/logo.png" alt="author-avatar" class="personal-img" data-v-03833281> <h3 class="name" data-v-03833281>
    茂茂
  </h3> <div class="num" data-v-03833281><div data-v-03833281><h3 data-v-03833281>25</h3> <h6 data-v-03833281>文章</h6></div> <div data-v-03833281><h3 data-v-03833281>21</h3> <h6 data-v-03833281>标签</h6></div></div> <hr data-v-03833281></div> <nav class="nav-links"><div class="nav-item"><a href="/vue-press-blog-html/" class="nav-link"><i class="iconfont reco-home"></i>
  主页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      博客
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/vue-press-blog-html/categories/编辑/" class="nav-link"><i class="iconfont undefined"></i>
  编辑
</a></li><li class="dropdown-item"><!----> <a href="/vue-press-blog-html/categories/vue/" class="nav-link"><i class="iconfont undefined"></i>
  vue
</a></li><li class="dropdown-item"><!----> <a href="/vue-press-blog-html/categories/工具使用/" class="nav-link"><i class="iconfont undefined"></i>
  工具使用
</a></li><li class="dropdown-item"><!----> <a href="/vue-press-blog-html/categories/读书/" class="nav-link"><i class="iconfont undefined"></i>
  读书
</a></li><li class="dropdown-item"><!----> <a href="/vue-press-blog-html/categories/前端/" class="nav-link"><i class="iconfont undefined"></i>
  前端
</a></li><li class="dropdown-item"><!----> <a href="/vue-press-blog-html/categories/python/" class="nav-link"><i class="iconfont undefined"></i>
  python
</a></li><li class="dropdown-item"><!----> <a href="/vue-press-blog-html/categories/node/" class="nav-link"><i class="iconfont undefined"></i>
  node
</a></li><li class="dropdown-item"><!----> <a href="/vue-press-blog-html/categories/可视化/" class="nav-link"><i class="iconfont undefined"></i>
  可视化
</a></li><li class="dropdown-item"><!----> <a href="/vue-press-blog-html/categories/高德地图/" class="nav-link"><i class="iconfont undefined"></i>
  高德地图
</a></li><li class="dropdown-item"><!----> <a href="/vue-press-blog-html/categories/ios/" class="nav-link"><i class="iconfont undefined"></i>
  ios
</a></li><li class="dropdown-item"><!----> <a href="/vue-press-blog-html/categories/react/" class="nav-link"><i class="iconfont undefined"></i>
  react
</a></li></ul></div></div><div class="nav-item"><a href="/vue-press-blog-html/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><a href="/vue-press-blog-html/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间轴
</a></div><div class="nav-item"><a href="/vue-press-blog-html/about/" class="nav-link"><i class="iconfont reco-account"></i>
  关于
</a></div> <!----></nav> <!----> </aside> <div class="password-shadow password-wrapper-in" style="display:none;" data-v-5cb9a64e data-v-0c5314fc><h3 class="title" style="display:none;" data-v-5cb9a64e data-v-5cb9a64e>Vue基础</h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-5cb9a64e data-v-5cb9a64e><input type="password" value="" data-v-5cb9a64e> <span data-v-5cb9a64e>Konck! Knock!</span> <button data-v-5cb9a64e>OK</button></label> <div class="footer" style="display:none;" data-v-5cb9a64e data-v-5cb9a64e><span data-v-5cb9a64e><i class="iconfont reco-theme" data-v-5cb9a64e></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-5cb9a64e>vuePress-theme-reco</a></span> <span data-v-5cb9a64e><i class="iconfont reco-copyright" data-v-5cb9a64e></i> <a data-v-5cb9a64e><span data-v-5cb9a64e>茂茂</span>
            
          <span data-v-5cb9a64e>2019 - </span>
          2022
        </a></span></div></div></div> <div data-v-0c5314fc><main class="page" style="padding-right:0;"><div class="page-title" style="display:none;"><h1 class="title">Vue基础</h1> <div class="page-info" data-v-0efa1f05><i class="iconfont reco-account" data-v-0efa1f05><span data-v-0efa1f05>茂茂</span></i> <i class="iconfont reco-date" data-v-0efa1f05><span data-v-0efa1f05>2019-09-21</span></i> <i class="iconfont reco-eye" data-v-0efa1f05><span id="/vue-press-blog-html/blogs/tec/2017/092102.html" data-flag-title="Your Article Title" class="leancloud-visitors" data-v-0efa1f05><a class="leancloud-visitors-count" style="font-size:.9rem;font-weight:normal;color:#999;"></a></span></i> <i class="iconfont reco-tag tags" data-v-0efa1f05><span class="tag-item" data-v-0efa1f05>vue</span><span class="tag-item" data-v-0efa1f05>前端</span></i></div></div> <div class="theme-reco-content content__default" style="display:none;"><h2 id="vue基础"><a href="#vue基础" class="header-anchor">#</a> Vue基础</h2> <h3 id="vue-js是什么"><a href="#vue-js是什么" class="header-anchor">#</a> Vue.js是什么</h3> <blockquote><p>vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。</p></blockquote> <h3 id="vue实例"><a href="#vue实例" class="header-anchor">#</a> Vue实例</h3> <p>Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
1、在文件中引入vue.js，下面两种方式选择其中一种</p> <div class="language- extra-class"><pre class="language-text"><code>&lt;script type=&quot;text/javascript&quot; src=&quot;../vue.js&quot;&gt;&lt;/script&gt;
&lt;!-- 开发环境版本，包含了有帮助的命令行警告 --&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;&gt;&lt;/script&gt;
</code></pre></div><p>2、建立简单的vue实例对象</p> <div class="language- extra-class"><pre class="language-text"><code>&lt;div id=&quot;app&quot;&gt;
	//调用vue中的数据
	&lt;h1&gt;{{message}}&lt;/h1&gt;
	//下面的两种书写方式结果相同
	&lt;button v-on:click=&quot;click()&quot;&gt;click&lt;/button&gt;
	&lt;button @click=&quot;click()&quot;&gt;click01&lt;/button&gt;
&lt;/div&gt;

&lt;script&gt;
		var ve=	new Vue({
				el:'#app',
				data:{
					message:'hello',
				},
				methods:{
					click:function(){
						alert(&quot;你好，世界&quot;);
					}
				}
			});
&lt;/script&gt;

</code></pre></div><h3 id="vue常用指令"><a href="#vue常用指令" class="header-anchor">#</a> vue常用指令</h3> <p>1、v-on：绑定事件监听器，事件的类型由参数决定
例如：v-on：事件名称
或者@事件名称</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>click()<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>点击<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>click()<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>点击<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>2、v-if/v-else-if/v-else判断指令：根据表达式的值，进行渲染</p> <div class="language- extra-class"><pre class="language-text"><code>&lt;div id=&quot;app&quot;&gt;
			//isshow为true时，标签内的内容显示到页面
			&lt;h1 v-if=&quot;isshow&quot;&gt;{{isshow}}ok&lt;/h1&gt;
&lt;/div&gt;

&lt;script&gt;
			new Vue({
				el:'#app',
				data:{
					message:'hello',
					isshow:true,
				},
				methods:{
					click:function(){
						alert(&quot;你好，世界&quot;);
					}
				}
			});
&lt;/script&gt;

</code></pre></div><p>3、v-model：数据绑定指令（一般为表单输入绑定）</p> <div class="language- extra-class"><pre class="language-text"><code>//v-model 指令在表单&lt;input&gt;、&lt;textarea&gt; 及 &lt;select&gt; 元素上创建双向数据绑定
&lt;input type=&quot;text&quot; v-model=&quot;message&quot; /&gt;{{message}}
</code></pre></div><p>4、v-for：循环（可以多层嵌套显示和java中的for循环原理一致）
v-for格式：</p> <div class="language- extra-class"><pre class="language-text"><code>&lt;li v-for=“item in items”&gt;{{item}} &lt;/ li&gt;
</code></pre></div><p>其中：item是被迭代数组元素的别名
items是源数据数组
使用 item in items 的特殊格式语法</p> <div class="language- extra-class"><pre class="language-text"><code>&lt;div id=&quot;demo&quot;&gt;
	&lt;ul&gt;
		&lt;li v-for=&quot;item in items&quot;&gt;{{item}}&lt;/li&gt;
		&lt;li v-for=&quot;item in arr1&quot;&gt;{{item}}&lt;/li&gt;
		&lt;li v-for=&quot;item in arr1.a&quot;&gt;{{item}}&lt;/li&gt;
	&lt;/ul&gt;
&lt;/div&gt;
&lt;script&gt;
			new Vue({
				el:'#demo',
				data:{
					items:[23,23,344,45],
					arr1:{&quot;a&quot;:[1,2,3],&quot;b&quot;:[2,2,3]},
				},
				methods:{
				}
			});
&lt;/script&gt;
</code></pre></div><p>5、v-bind：动态绑定属性
使用格式
v-bind:属性名=“data数据对象中的值”
简写
：属性名=“data数据对象中的值”</p> <div class="language- extra-class"><pre class="language-text"><code>&lt;styple&gt;
.child{
	width: 50px;
	height: 50px;
	background-color: gray;
	color: black;
	}
&lt;/style&gt;
&lt;div id=&quot;app&quot;&gt;
	&lt;img v-bind:src=&quot;img&quot; /&gt; //动态绑定了imges属性，img改变了图片，那么img标签也会改变
	&lt;div :class=&quot;{'child':isshow}&quot;&gt;div6&lt;/div&gt; //div区域的显示根据isshow的值来判定
	
&lt;/div&gt;
&lt;script&gt;
	new Vue({
				el:'#app',
				data:{
				isshow:true,
				img:'111.png',
				}
			})	
&lt;/script&gt;
</code></pre></div><h3 id="生命周期函数-钩子函数"><a href="#生命周期函数-钩子函数" class="header-anchor">#</a> 生命周期函数|钩子函数</h3> <p>1、生命周期函数</p> <div class="language- extra-class"><pre class="language-text"><code>beforeCreate

在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

beforeUpdate

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

该钩子在服务器端渲染期间不被调用。

beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
</code></pre></div><p><img src="/lifecycle.png" alt="alt 生命周期" title="生命周期"></p> <p>2、下面用一个生命周期函数演示的实例</p> <div class="language- extra-class"><pre class="language-text"><code>&lt;div id=&quot;demo&quot;&gt;
			&lt;h1&gt;{{message}}&lt;/h1&gt;
			&lt;button @click=&quot;changemessage()&quot;&gt;changemessage&lt;/button&gt;
&lt;/div&gt;
&lt;script&gt;
			var ve =new Vue({
					el:'#demo',
					data:{
						message:'vue生命周期',
						
					},
					beforeCreate:function(){
						console.group(&quot;------------beforecreate-----------&quot;)
						console.log('el:'+this.$el)
						console.log('data:'+this.$data)
						console.log('message:'+this.message)
					},
					created:function(){
						console.group(&quot;------------created-----------&quot;)
						console.log('el:'+this.$el)
						console.log('data:'+this.$data)
						console.log('message:'+this.message)
					},
					beforeMount:function(){
						console.group(&quot;------------beforemount-----------&quot;)
						console.log('el:'+this.$el)
						console.log('data:'+this.$data)
						console.log('message:'+this.message)
					},
					mounted:function(){
						console.group(&quot;------------mounted-----------&quot;)
						console.log('el:'+this.$el)
						console.log('data:'+this.$data)
						console.log('message:'+this.message)
					},
					beforeUpdate:function(){
						console.group(&quot;------------beforeupdate-----------&quot;)
						console.log('el:'+this.$el)
						console.log('data:'+this.$data)
						console.log('message:'+this.message)
					},
					updated:function(){
						console.group(&quot;------------updated-----------&quot;)
						console.log('el:'+this.$el)
						console.log('data:'+this.$data)
						console.log('message:'+this.message)
					},
					beforeDestroy:function(){
						console.group(&quot;------------destotry-----------&quot;)
						console.log('el:'+this.$el)
						console.log('data:'+this.$data)
						console.log('message:'+this.message)
					},
					destroyed:function(){
						console.group(&quot;------------destroyed-----------&quot;)
						console.log('el:'+this.$el)
						console.log('data:'+this.$data)
						console.log('message:'+this.message)
					},
					methods:{
						changemessage:function(){
							this.message='666'
						}
					}
				});
//销毁是在实例外面调用的
				ve.$destroy()
</code></pre></div><p>实际效果
<img src="/lifecycleshow01.png" alt="alt 生命周期实际效果" title="生命周期实际效果">
点击changemessage按钮
<img src="/lifecycleshow02.png" alt="alt 生命周期实际效果" title="生命周期实际效果"></p> <h3 id="vue组件化应用构建"><a href="#vue组件化应用构建" class="header-anchor">#</a> vue组件化应用构建</h3> <p>组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：
<img src="/components.png.png" alt="alt 组件化" title="组件化">
1、为什么使用组件？
使用组件一方面可以不用去直接修改标签，另一方面也会优化页面显示
注意:组件在实例前面书写
2、组件注册（全局与局部）</p> <h5 id="先看看全局组件的引用-就拿最常用的全局的暂无数据来举例-看看全局的是如何实现的。"><a href="#先看看全局组件的引用-就拿最常用的全局的暂无数据来举例-看看全局的是如何实现的。" class="header-anchor">#</a> 先看看全局组件的引用，就拿最常用的全局的暂无数据来举例，看看全局的是如何实现的。</h5> <p>（1）首先在components创建一个公共的目录，NoDatas目录里边包含index.vue和index.js,index.vue用来写公共的页面，index.js用来导出这个组件。</p> <div class="language- extra-class"><pre class="language-text"><code>&lt;template&gt;
&lt;!-- NoDataWords 可以灵活控制每个页面显示的内容  --&gt;
&lt;!-- NoDataHeight 可以灵活控制每个页面的高度  --&gt;
&lt;!-- 如果你的页面都是统一的字体，统一的样式,那就直接在这写死就好了 --&gt;
    &lt;div class=&quot;NoDataAtAll W100&quot;
         :style=&quot;{height: NoDataHeight }&quot;&gt;{{NoDataWords}}&lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
export default {
  // 就是基本的父子组件传值
  props: [&quot;NoDataHeight&quot;, &quot;NoDataWords&quot;],
  data() {
    return {};
  },
  methods: {}
};
&lt;/script&gt;
&lt;style lang=&quot;scss&quot; scoped&gt;
.NoDataAtAll {
  font-size: 14px;
  color: #909399;
}
&lt;/style&gt;
</code></pre></div><p>(2) 然后就是在index.js中注册该组件</p> <div class="language- extra-class"><pre class="language-text"><code>import NoDataS from './index.vue'
const noDataLists = {
    install: function(Vue) {
        // 注册并获取组件，然后在main.js中引用，在Vue.use()就可以了
        Vue.component('noDataLists', NoDataS)
    }
}
export default noDataLists
</code></pre></div><p>(3)在main.js中引入并使用该组件</p> <div class="language- extra-class"><pre class="language-text"><code>import noDataLists from '@/components/NoDatas/index'
Vue.use(noDataLists);
</code></pre></div><h5 id="第二种-全局注册组件形式"><a href="#第二种-全局注册组件形式" class="header-anchor">#</a> 第二种 全局注册组件形式</h5> <p><img src="/allzuchezujian01.png" alt="alt 全局注册组件" title="全局注册组件">
先在main.js里这样写。  然后在App.vue里面 的template模板里 直接使用</p> <div class="language- extra-class"><pre class="language-text"><code>&lt;users&gt;&lt;/users&gt;
</code></pre></div><p>加载使用即可
<img src="/allzuchezujian02.png" alt="alt 全局注册组件" title="全局注册组件">
局部组件引入方法 就是在App.vue里引入。
<img src="/allzuchezujian03.png" alt="alt 局部注册组件" title="局部注册组件">
2,.全局注册公共的函数
公共函数common.js</p> <div class="language- extra-class"><pre class="language-text"><code>const obj={
    fun1(){
    },
    fun2(){
    },
    fun3(){
    }
}
export default obj
</code></pre></div><p>main.js中引入方法</p> <div class="language- extra-class"><pre class="language-text"><code>import common from '.icommon.js'
Vue.prototype.common=comm
</code></pre></div><p>其它组件中调用该方法的时候</p> <div class="language- extra-class"><pre class="language-text"><code>this.common.fun1();
</code></pre></div><h4 id="局部组件-局部组件放在实例中"><a href="#局部组件-局部组件放在实例中" class="header-anchor">#</a> 局部组件:局部组件放在实例中</h4> <p>父子组件可以嵌套使用
父子组件间作用域相互独立
子组件只能在父组件的模板中进行调用</p> <p>子组件是父组件细化拆分的过程
父组件向子组件传值通过props进行</p> <p>下面的示例中包含了父组件向子组件传值的功能</p> <div class="language- extra-class"><pre class="language-text"><code>&lt;div id=&quot;box&quot;&gt;
	&lt;test&gt;
	&lt;/test&gt;
&lt;/div&gt;
&lt;template id='box1'&gt;
	&lt;div&gt;
	&lt;input type=&quot;text&quot; v-model=&quot;message&quot; /&gt;
	&lt;box1 num=&quot;1&quot; txt='yi' :msg=&quot;message&quot;&gt;&lt;/box1&gt;
	&lt;box1 num=&quot;2&quot; txt='er' :msg=&quot;message&quot;&gt;&lt;/box1&gt;
	&lt;/div&gt;
&lt;/template&gt; 

&lt;script&gt;
var ve = new Vue({
		el:'#box',
		data:{
		},
		//父級
		components:{
			'test':{
				template:&quot;#box1&quot;,
				data:function(){
					return{
						message:'aaa'
					}
				},
				//子级
				components:{
					'box1':{
						template:&quot;#box2&quot;,
						//子级想将父级的一个值，作为自己的一个局部变量
						data:function(){
							return{
								mymsg:this.msg
							}
						},
						//计算属性
						computed:{
							mymsg1:function(){
								return this.msg+'!'
							}
						},
						props:[
							'num','txt','msg'
						]
						}
					}
				}
			}
		})
&lt;/script&gt;
</code></pre></div><h4 id="自定义监听事件-子组件向父组件传值"><a href="#自定义监听事件-子组件向父组件传值" class="header-anchor">#</a> 自定义监听事件（子组件向父组件传值）</h4> <p>自定义监听事件： $emit()
传值的过程：
子组件设定了一个点击事件，点击事件中夹带着传递的值—》通过getval方法将拿到的值赋值给父组件的message—》父组件显示出message值</p> <div class="language- extra-class"><pre class="language-text"><code>&lt;div id=&quot;box&quot;&gt;
			&lt;parent&gt;&lt;/parent&gt;
&lt;/div&gt;
	&lt;template id='par'&gt;
		&lt;div&gt;
			&lt;h1&gt; 父组件:{{parentmsg}}||{{message}}&lt;/h1&gt;
			&lt;child @change=&quot;getval&quot;&gt;&lt;/child&gt;
		&lt;/div&gt;
	&lt;/template&gt;
	&lt;template id='child'&gt;
		&lt;div @click=&quot;fn()&quot;&gt;
			&lt;h2&gt;子组件:{{childmsg}}&lt;/h2&gt;
		&lt;/div&gt;
	&lt;/template&gt;
&lt;script&gt;
	var vm = new Vue({
		el:&quot;#box&quot;,
		components:{
			&quot;parent&quot;:{
				template:'#par',
				data:function(){
					return {
						parentmsg:&quot;父组件的信息&quot;,
						message:''
					}
				},
				methods:{
					getval:function(val){
						this.message = val
						console.log(val)
					}
				},
				components:{
					'child':{
						template:'#child',
						data:function(){
							return{
								childmsg:'子组件的信息'
							}
						},
						methods:{
							fn:function(){
								this.$emit('change',this.childmsg)
							}
						}
					}
				}
			}
		}
	})
&lt;/script&gt;

</code></pre></div><h3 id="slot插槽"><a href="#slot插槽" class="header-anchor">#</a> SLOT插槽</h3> <p>目的:其目的在于让组件的可扩展性更强,用来混合父组件的内容与子组件自己的模板.
分为匿名slot和具名slot
一、slot的作用
Q: 假如父组件需要在子组件内放一些DOM元素，那么这些DOM是显示呢还是不显示呢？</p> <p>默认情况下是不会显示的，如下图所示，页面并没有显示父组件增加的<span>我是魔鬼</span>  元素内容。那么我执意要加DOM元素到子组件上该怎么实现呢？这就用到了slot插槽，使用slot这个标签可以将父组件放在子组件的内容，放到它想显示的地方</p> <div class="language- extra-class"><pre class="language-text"><code>&lt;div id=&quot;app&quot;&gt;  
  &lt;children&gt;  
    &lt;span&gt;我是魔鬼&lt;/span&gt;  
    &lt;!--上面这行不会显示--&gt;  
  &lt;/children&gt;  
&lt;/div&gt;  
&lt;script&gt;  
  var vm = new Vue({  
      el: '#app',  
      components: {  
         children: {   
         template: &quot;&lt;h1&gt;我是子组件&lt;/h1&gt;&quot;  
       }  
     }  
  });  
&lt;/script&gt;  
</code></pre></div><p>二、简单理解slot
通俗易懂的讲，slot具有“占坑”的作用，在子组件占好了位置，那父组件使用该子组件标签时，新添加的DOM元素就会自动填到这个坑里面</p> <p>三、单个slot    
我们将上面的代码改一改 , 给child组件添加slot插槽，那么父组件的添加的DOM元素就填充到这个slot插槽里面了</p> <p>注意：如果有多个DOM元素，会一起插入到</p> <div class="language- extra-class"><pre class="language-text"><code>&lt;slot&gt;&lt;/slot&gt;
</code></pre></div><p>这个标签内</p> <div class="language- extra-class"><pre class="language-text"><code>&lt;div id=&quot;app&quot;&gt;  
  &lt;children&gt;  
    &lt;span&gt;我是魔鬼&lt;/span&gt;  
    &lt;!--上面这行会显示在 “我是子组件” 数据后面--&gt;  
  &lt;/children&gt;  
&lt;/div&gt;  
&lt;script&gt;  
  var vm = new Vue({  
      el: '#app',  
      components: {  
         children: {   
         template: &quot;&lt;h1&gt;我是子组件&lt;/h1&gt;&lt;slot&gt;&lt;/slot&gt;&quot;  
       }  
     }  
  });  
&lt;/script&gt;  
</code></pre></div><p>四、具名插槽
现在我们需要将父组件添加的HTML标签放在子组件里的不同位置。具名插槽实现：先在子组件对应分发slot标签里，添加name=”name名” 属性，其次父组件在要分发的标签里添加 slot=”name名” 属性，然后就会将对应的标签放在对应的位置了。</p> <p>简单理解就是：给子组件占的每一个坑取名，将父组件添加的HTML元素添加到指定名字的坑，就实现了分发内容在不同位置显示</p> <p>【Child组件模板】</p> <div class="language- extra-class"><pre class="language-text"><code>&lt;template&gt;
  &lt;div&gt;
    &lt;slot name=&quot;header&quot;&gt;&lt;/slot&gt;
    &lt;h1&gt;我是子组件&lt;/h1&gt;
    &lt;slot name=&quot;footer&quot;&gt;&lt;/slot&gt;
  &lt;/div&gt;
&lt;/template&gt;
</code></pre></div><p>【父组件引用Child组件】</p> <div class="language- extra-class"><pre class="language-text"><code>&lt;Child&gt;
  &lt;span slot=&quot;header&quot;&gt;我是header&lt;/span&gt;
  &lt;span slot=&quot;footer&quot;&gt;我是footer&lt;/span&gt;
&lt;/Child&gt;
</code></pre></div><p>会显示成：</p> <blockquote><p>我是header
我是子组件
我是footer
五、编辑作用域
父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译</p></blockquote> <p>【Child组件模板】</p> <div class="language- extra-class"><pre class="language-text"><code>&lt;template&gt;
  &lt;div&gt;
    &lt;slot name=&quot;header&quot;&gt;&lt;/slot&gt;
    &lt;h1&gt;{{msg}}&lt;/h1&gt;
    &lt;slot&gt;&lt;/slot&gt;
    &lt;slot name=&quot;footer&quot;&gt;&lt;/slot&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
export default {
  data() {
    return {
      msg: '我是子组件里面的内容'
    }
  }
}
&lt;/script&gt;
</code></pre></div><p>【父组件引用Child组件】</p> <div class="language- extra-class"><pre class="language-text"><code>&lt;template&gt;
  &lt;Child&gt;
    &lt;span slot=&quot;header&quot;&gt;我是header&lt;/span&gt;
    &lt;h1&gt;{{msg}}&lt;/h1&gt;
    &lt;span slot=&quot;footer&quot;&gt;我是footer&lt;/span&gt;
  &lt;/Child&gt;
&lt;/template&gt;
&lt;script&gt;
export default {
  data() {
    return {
      msg: '我是父组件的内容'
    }
  }
}
&lt;/script&gt;
</code></pre></div><p>六、解构slot-scope
在子组件中插槽中通过：data绑定了数据，父组件可以通过slot-scope=&quot;name&quot;来取得子组件作用域插槽：
data绑定的数据，name的名称可以随便取，用来定义对象来代替取到的data数据。</p> <p>【Child组件模板】</p> <div class="language- extra-class"><pre class="language-text"><code>&lt;template&gt;
  &lt;div&gt;
    &lt;slot :data=&quot;data&quot;&gt;&lt;/slot&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
export default {
  data() {
    return {
      data: ['Neinei','Laoba','Demi','Feiyan']
    }
  }
}
&lt;/script&gt;
</code></pre></div><p>【父组件引用Child组件】</p> <div class="language- extra-class"><pre class="language-text"><code>  &lt;template&gt;
    &lt;!-- 循环数据列表 --&gt;
    &lt;Child&gt;
      &lt;div slot-scope=&quot;msg&quot;&gt;
        &lt;span v-for=&quot;item in msg.data&quot;&gt;{{item}} &lt;/span&gt;
      &lt;/div&gt;
    &lt;/Child&gt;
 
    &lt;!-- 直接显示数据 --&gt;
    &lt;Child&gt;
      &lt;div slot-scope=&quot;msg&quot;&gt;
        &lt;span&gt;{{msg.data}} &lt;/span&gt;
      &lt;/div&gt;
    &lt;/Child&gt;
 
    &lt;!-- 不使用其提供的数据, 作用域插槽退变成匿名插槽 --&gt;
    &lt;Child&gt;
      &lt;div&gt;我是插槽&lt;/div&gt;
    &lt;/Child&gt;
  &lt;/template&gt;
</code></pre></div><p>显示为：</p> <blockquote><p>Neinei Laoba Demi Feiyan
['Neinei','Laoba','Demi','Feiyan']
我是插槽</p></blockquote> <h3 id="vue的路由设置"><a href="#vue的路由设置" class="header-anchor">#</a> vue的路由设置</h3> <p>要引入vue-router.js库文件
作用：
根据url锚点的位置，在容器中加载不同的模块，本质是作为页面导航
完成SPA(Singal Page Application)的开发
一种特殊的web应用，它将所有活动局限于一个web页面中，仅web页面初始化时加载项应的html、JavaScript、css
一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转，而是利用JavaScript动态的变换HTML（采用的是div切换显示或隐藏），从而实现ui与用户的交互
下面是一个简单地单页面示例</p> <div class="language- extra-class"><pre class="language-text"><code>&lt;div id=&quot;app&quot;&gt;
	&lt;ul&gt;
		&lt;li &gt;
			&lt;router-link to=&quot;/home&quot;&gt;首页&lt;/router-link&gt;
		&lt;/li&gt;
		&lt;li &gt;
			&lt;router-link to=&quot;/news&quot;&gt;新闻&lt;/router-link&gt;
		&lt;/li&gt;
		&lt;li &gt;
			&lt;router-link to=&quot;/hot&quot;&gt;热点&lt;/router-link&gt;
		&lt;/li&gt;
	&lt;/ul&gt;
	&lt;div class=&quot;show&quot;&gt;
		&lt;router-view&gt;&lt;/router-view&gt;
	&lt;/div&gt;
	&lt;button @click=&quot;back()&quot;&gt;go back&lt;/button&gt;
&lt;/div&gt;
&lt;script&gt;
		const Home={template:'&lt;h2&gt;首页&lt;/h2&gt;'}
		const News={template:'&lt;h2&gt;新闻&lt;/h2&gt;'}
		const Hot={template:'&lt;h2&gt;热点&lt;/h2&gt;'}
		//Vue.extend(template:'&lt;h1&gt;首页&lt;/h1&gt;')
		//配置路径
		const routes=[
			{
				path:'/home',component:Home
			},
			{
				path:'/news',component:News
			},
			{
				path:'/hot',component:Hot
			}
		]
		
		//创建router
		const router = new VueRouter({
			routes
		})
		
		var vm = new Vue({
			el:'#app',
			router,
			beforeCreate:function(){
				this.$router.push('/home').catch(err=&gt;{err})
			},
			methods:{
				back(){
					this.$router.go(-1);
				}
			}
		})
&lt;/script&gt;
</code></pre></div><p>二级路由的配置是在一级路由的基础上，在某一个path下再分离出几个低级的path
示例</p> <div class="language- extra-class"><pre class="language-text"><code>{
	//新闻模块下有将新闻进行分类：科技、军事等；其他步骤不影响
	path:'/news',component:News,
	children:[
		/* 二级路由，path分配，前面没有“ / ” */
		{
			path:'js',
			component:{
				template:'&lt;p&gt;军事类新闻&lt;/p&gt;'
			}
		},
		{
			path:'kj',
			component:{
				template:'&lt;p&gt;科技类新闻&lt;/p&gt;'
			}
		},
		{
			/* 默认页面可以直接用一个组件，也可以重定向 */
			path:'/',
			redirect:'js'
			// component:{
			// 	template:'&lt;p&gt;默认值&lt;/p&gt;'
			// }
		}
	]
},

</code></pre></div><h3 id="axios的使用"><a href="#axios的使用" class="header-anchor">#</a> axios的使用</h3> <p>axios的get方法使用
axios相关使用
一、axios安装
使用npm安装axios</p> <div class="language-vue extra-class"><pre class="language-vue"><code>	npm install axios
</code></pre></div><p>使用cnpm安装axios</p> <div class="language-vue extra-class"><pre class="language-vue"><code>	cnpm install axios
</code></pre></div><p>使用yarn安装axios</p> <div class="language-vue extra-class"><pre class="language-vue"><code>	yarn install axios
</code></pre></div><p>使用cdn链接axios</p> <div class="language-vue extra-class"><pre class="language-vue"><code>	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://unpkg.com/axios/dist/axios.min.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>二、请求数据方法</p> <ul><li>get请求：方式一：</li></ul> <div class="language- extra-class"><pre class="language-text"><code>axios({
		// 默认请求方式为get
		method: 'get',
		url: 'api',
		// 传递参数
		params: {
			key: value
		},
		// 设置请求头信息
		headers: {
			key: value
		}
		responseType: 'json'
	}).then(response =&gt; {
		// 请求成功
		let res = response.data;
		console.log(res);
	}).catch(error =&gt; {
		// 请求失败，
		console.log(error);
	});
</code></pre></div><ul><li>get请求：方式二</li></ul> <div class="language- extra-class"><pre class="language-text"><code>axios.get(&quot;api&quot;, {
		// 传递参数
		params: {
			key: value
		},
		// 设置请求头信息，可以传递空值
		headers: {
			key: value
		}
	}).then(response =&gt; {
		// 请求成功
		let res = response.data;
		console.log(res);
	}).catch(error =&gt; {
		// 请求失败，
		console.log(error);
	});
</code></pre></div><ul><li>post请求：方式一</li></ul> <div class="language- extra-class"><pre class="language-text"><code>// 注：post请求方法有的要求参数格式为formdata格式，此时需要借助 Qs.stringify()方法将对象转换为字符串
	let obj = qs.stringify({
		key: value
	});
	
	axios({
		method: 'post',
		url: 'api',
		// 传递参数
		data: obj,
		// 设置请求头信息
		headers: {
			key: value
		}
		responseType: 'json'
	}).then(response =&gt; {
		// 请求成功
		let res = response.data;
		console.log(res);
	}).catch(error =&gt; {
		// 请求失败，
		console.log(error);
	});
</code></pre></div><ul><li>post请求：方式二</li></ul> <div class="language- extra-class"><pre class="language-text"><code>let data = {
			key: value
		},
		headers = {
			USERID: &quot;&quot;,
			TOKEN: &quot;&quot;
		};
	// 若无headers信息时，可传空对象占用参数位置
	axios.post(&quot;api&quot;, qs.stringify(data), {
		headers
	}
	}).then(response =&gt; {
		// 请求成功
		let res = response.data;
		console.log(res);
	}).catch(error =&gt; {
		// 请求失败，
		console.log(error);
	});
</code></pre></div><ul><li>Qs的使用
引用cdn或者使用npm、cnpm或者yarn进行插件安装
使用cdn时，默认全局变量为Qs
Qs基本方法使用
qs.stringify() 方法：将目标数据转换为string字符串
qs.parse() 方法：将对象字符串格式的数据转换为对象格式</li></ul></div> <footer class="page-edit" style="display:none;"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">2022/1/5 下午4:20:07</span></div></footer> <!----> <!----> <!----></main> <!----></div></div></div></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-c6073ba8 data-v-c6073ba8><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-c6073ba8><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-c6073ba8></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-c6073ba8></path></svg></div><div class="kanbanniang" data-v-5775ee02><div class="banniang-container" style="display:;" data-v-5775ee02><div class="messageBox" style="right:68px;bottom:190px;display:none;" data-v-5775ee02>
      我是王茂铭谢谢你的关注 
    </div> <div class="operation" style="right:90px;bottom:40px;display:;" data-v-5775ee02><i class="kbnfont kbn-ban-home ban-home" data-v-5775ee02></i> <i class="kbnfont kbn-ban-message message" data-v-5775ee02></i> <i class="kbnfont kbn-ban-close close" data-v-5775ee02></i> <a target="_blank" href="https://vuepress-theme-reco.recoluan.com/views/plugins/kanbanniang.html" data-v-5775ee02><i class="kbnfont kbn-ban-info info" data-v-5775ee02></i></a> <i class="kbnfont kbn-ban-theme skin" style="display:;" data-v-5775ee02></i></div> <canvas id="banniang" width="240" height="352" class="live2d" style="right:90px;bottom:-20px;opacity:0.9;" data-v-5775ee02></canvas></div> <div class="showBanNiang" style="display:none;" data-v-5775ee02>
    看板娘
  </div></div><canvas id="vuepress-canvas-cursor"></canvas><APlayer audio="" fixed="true" mini="true" autoplay="autoplay" theme="#b7daff" loop="loop" order="random" preload="auto" volume="0.2" mutex="true" lrc-type="1" list-max-height="250" storage-name="vuepress-plugin-meting" id="aplayer-fixed"></APlayer></div></div>
    <script src="/vue-press-blog-html/assets/js/app.0c76d487.js" defer></script><script src="/vue-press-blog-html/assets/js/5.12b1c0e9.js" defer></script><script src="/vue-press-blog-html/assets/js/1.6e6d8766.js" defer></script><script src="/vue-press-blog-html/assets/js/17.481f1fe6.js" defer></script>
  </body>
</html>
